<template>
  <div class="wechat-setting-page">
    <page-header-wrapper>
      <page-tab-list>
        <a-alert v-if="!hasChannel" message="此配置用于微信支付" type="info" show-icon style="margin: 24px 0" />
        <div v-else style="margin: 24px 0"></div>
        <template>
          <a-row :gutter="[16, 30]" type="flex" align="middle" v-if="!hasChannel">
            <a-col class="required" :span="4" style="text-align: right"> 平台： </a-col>
            <a-col :span="20">
              <a-radio-group @change="changeRadio" v-model="params.type">
                <a-radio :value="1"> 小程序 </a-radio>
                <a-radio :value="2"> 公众号 </a-radio>
                <a-radio :value="3"> app </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="params.type == 2">
            <a-col :span="4" style="text-align: right"> 服务器地址： </a-col>
            <a-input
              class="input-class"
              :value="currentHost + '/index.php?r=common/wechat-callback/index'"
              :disabled="true"
            />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="params.type == 2">
            <a-col :span="4" style="text-align: right"> 支付目录： </a-col>
            <a-input class="input-class" :value="currentHost + '/'" :disabled="true" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> appID： </a-col>
            <a-input
              class="input-class"
              v-model="params.app_id"
              :disabled="!self_mini && is_saas == 1 && select_options"
            />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="self_mini || (is_saas != 1 && select_options)">
            <a-col class="required" :span="4" style="text-align: right"> appSecret： </a-col>
            <a-input class="input-class" v-model="params.app_secret" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="params.type != 2">
            <a-col class="required" :span="4" style="text-align: right"> 公司完整名称（用于分账）： </a-col>
            <a-input class="input-class" v-model="params.name" :disabled="is_saas == 1 && select_options" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top">
            <a-col class="required" :span="4" style="text-align: right"> 商户号： </a-col>
            <a-input class="input-class" v-model="params.mch_id" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="params.type === 1">
            <a-col :span="4" style="text-align: right"> 小程序ID： </a-col>
            <a-input class="input-class" v-model="params.gh_wechat_app_id" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="is_saas != 1 && select_options">
            <a-col class="required" :span="4" style="text-align: right"> 微信支付Api支付密钥： </a-col>
            <a-input class="input-class" v-model="params.pay_key" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="is_saas != 1 && select_options">
            <a-col :span="4" style="text-align: right"> 微信支付（apiclient_cert.pem）： </a-col>
            <a-textarea style="width: 600px; height: 100px; margin: 15px 0 40px 0" v-model="params.cert_pem" />
          </a-row>
          <a-row :gutter="[16, 30]" type="flex" align="top" v-if="is_saas != 1 && select_options">
            <a-col :span="4" style="text-align: right"> 微信支付（apiclient_key.pem）： </a-col>
            <a-textarea style="width: 600px; height: 100px; margin-bottom: 30px" v-model="params.key_pem" />
          </a-row>
          <a-row v-if="params.type == 3" :gutter="[16, 30]" type="flex" align="top">
            <a-col :span="4" style="text-align: right"> app名称： </a-col>
            <a-input class="input-class" v-model="params.app_name" />
          </a-row>
          <template v-if="params.type == 2">
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col class="required" :span="4" style="text-align: right"> 公众号token： </a-col>
              <a-input class="input-class" v-model="params.token" />
            </a-row>
            <a-row :gutter="[16, 30]" type="flex" align="top">
              <a-col :span="4" style="text-align: right"> 关注自动回复内容： </a-col>
              <a-input class="input-class" v-model="params.auto_reply" />
            </a-row>
          </template>
          <a-row :gutter="[30, 30]" type="flex" align="middle">
            <a-col offset="10">
              <a-button type="primary" @click="onSave"> 保存 </a-button>
            </a-col>
          </a-row>
        </template>
      </page-tab-list>
    </page-header-wrapper>
  </div>
</template>
<script>
import { getWechatConfig, setWechatConfig } from '@/api/setting/wechatConfig'

export default {
  name: 'WechatConfig',
  components: {},
  data() {
    return {
      params: {
        app_id: null,
        type: 1,
        app_secret: null,
        pay_key: null,
        cert_pem: null,
        key_pem: null,
        mch_id: null,
        auto_reply: null,
        token: null,
        app_name: null,
        name: null,
        gh_wechat_app_id: null,
      },
      mini: {},
      mp: {},
      app: {},
      temp: {},
      is_saas: 0,
      self_mini: 0,
      select_options: true,
      hasChannel: false,
    }
  },
  computed: {
    currentHost() {
      return window.location.protocol + '//' + window.location.host
    },
  },
  watch: {
    $route(val) {
      console.log('call,', val)
      if (val.meta.type) {
        this.params.type = val.meta.type
      } else {
        this.params.type = 1
      }

      if (val.meta.hasChannel) {
        this.hasChannel = true
      } else {
        this.hasChannel = false
      }

      this.changeRadio()
    },
  },
  created() {
    this.clear()
    if (this.$route.meta.type) this.params.type = this.$route.meta.type
    if (this.$route.meta.hasChannel) this.hasChannel = true
    // this.getData()
    this.getData(()=>{
      this.changeRadio()
    })
  },
  methods: {
    clear() {
      this.params = {
        app_id: null,
        type: 1,
        app_secret: null,
        pay_key: null,
        cert_pem: null,
        key_pem: null,
        mch_id: null,
        auto_reply: null,
        token: null,
        app_name: null,
        name: null,
        gh_wechat_app_id: null,
      }

      this.mini = {}
      this.mp = {}
      this.app = {}
      this.temp = {}
      this.is_saas = 0
      this.self_mini = 0
      this.select_options = true
      this.hasChannel = false
    },
    changeRadio() {
      this.selectType(this.params.type)
      this.params.app_id = this.temp.app_id
      this.params.app_secret = this.temp.app_secret
      this.params.cert_pem = this.temp.cert_pem
      this.params.key_pem = this.temp.key_pem
      this.params.pay_key = this.temp.pay_key
      this.params.mch_id = this.temp.mch_id
      this.params.name = this.temp.name
      if (this.params.type === 2) {
        this.params.token = this.temp.token
        this.params.auto_reply = this.temp.auto_reply
      }
      if (this.temp.type === 3) {
        this.params.app_name = this.temp.app_name
      }
    },
    onSave() {
      const hide = this.$message.loading('提交中', 0)
      setWechatConfig(this.params).then((res) => {
        hide()
        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success('保存成功！')
        }
      })
    },
    getData: async function (fn) {
      var params = { type: this.params.type }
      await getWechatConfig(params).then((res) => {
        const data = res.data
        this.mini = data.mini
        this.app = data.app
        this.mp = data.mp
        this.is_saas = data.is_saas
        this.self_mini = data.self_mini

        if (this.mini) {
          this.params.app_id = this.mini.app_id
          this.params.app_secret = this.mini.app_secret
          this.params.cert_pem = this.mini.cert_pem
          this.params.key_pem = this.mini.key_pem
          this.params.pay_key = this.mini.pay_key
          this.params.mch_id = this.mini.mch_id
          this.params.name = this.mini.name
          this.params.gh_wechat_app_id = this.mini.gh_wechat_app_id
        }

        fn && fn()
      })
    },
    selectType(type) {
      console.log('type~~,', type)
      if (type === 1) {
        this.temp = this.mini
        this.select_options = true
      }
      if (type === 2) {
        this.temp = this.mp
        this.select_options = true
      }
      if (type === 3) {
        this.temp = this.app
        this.select_options = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
.wechat-setting-page {
  .required::before {
    content: '*';
    color: red;
  }
  .input-class {
    width: 1100px;
    margin: 10px 8px 25px 0;
  }
  input {
    max-width: 600px;
  }
}
</style>
